<template>
  <div class="layout">
    <v-plain-header/>
    <div class="container">
      <el-form class="bdr-10" :model="form" ref="form" label-position="right" :rules="rules" label-width="60px">
        <el-form-item prop="username">
          <i slot="label" class="iconfont icon-user"></i>
          <el-input class="line-input" placeholder="请输入用户名/手机号" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <i slot="label" class="iconfont  icon-mima"></i>
          <el-input class="line-input" placeholder="请输入密码" type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-button class="login-btn" type="primary" round @click="login">登录</el-button>
        <div class="operations">
          <!-- <el-button type="text" @click="$router.push('/register/guide')">注册</el-button> -->
          <!--<el-button type="text">忘记密码</el-button>-->
        </div>
      </el-form>
    </div>
    <v-plain-footer/>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { Mutation, Getter } from 'vuex-class'
  import md5 from 'md5'
  import vPlainHeader from '@/components/plain-header'
  import vPlainFooter from '@/components/plain-footer'

  @Component({
    components: {
      vPlainHeader, vPlainFooter
    }
  })
  export default class Login extends Vue {
    @Mutation setUserInfo
    @Mutation removeUserInfo
    @Getter userInfo
    @Prop() url
    form = {
      username: '',
      password: ''
    }
    rules = {
      username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 5, message: '请输入最少6位的账号', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '请输入最少6位的密码', trigger: 'blur' }
      ]
    }

    login () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let form = {
            ...this.form,
            password: md5(this.form.password).toLocaleUpperCase()
          }
          let res: AjaxResponse = await this.$axios.post('b/boms/user/login', form)
          this.setUserInfo(res)
          this.$utils.tips(res)
          if (res.responseCode === 200) {
            let pathName = '/home';
            switch (res.data.roleType) {
                case 0:
                  pathName = '/home'
                break;
                case 1:
                  pathName = '/home/boss'
                break;
                case 2:
                  pathName = '/home/customer-service'
                break;
                case 3:
                  pathName = '/home/channel-commissioner'
                break;
                case 6:
                  pathName = '/home/channel-commissioner'
                break;
            }
            this.$nextTick(() => {
              this.$router.push(pathName)
            })
          }
        }
      })
    }

    mounted () {
     this.removeUserInfo()
    }
  }
</script>

<style lang="less" scoped>
  .layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/03.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .el-form {
    background: #fff;
    opacity: .9;
    width: 400px;
    height: 300px;
    padding: 10px;
    padding-top: 50px;
    text-align: center;
  }

  .login-btn {
    width: 300px;
    margin-top: 10px;
  }

  .iconfont {
    font-size: 24px;
    vertical-align: -webkit-baseline-middle;
  }

  .icon-mima {
    font-size: 28px;
  }

  .operations {
    display: flex;
    justify-content: space-between;
    width: 280px;
    margin: 0 auto;
  }
</style>
<style lang="less">
  .container {
    .el-form-item.is-required .el-form-item__label:before {
      display: none;
    }
  }
</style>
